<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho Three Clusters</h1>
    <div id="container"></div>
    <script src="../engine/dist/ElGrapho.js"></script>
    <script>
      const NUM_NODES = 300;
      const NUM_NODES_FIRST_GROUP = 50;
      const NUM_NODES_SECOND_GROUP = 75;

      let model = {
        nodes: [],
        edges: []
      };

      for (let n=0; n<NUM_NODES; n++) {
        let group;

        if (n < NUM_NODES_FIRST_GROUP) {
          group = 0;
        }
        else if (n < NUM_NODES_FIRST_GROUP + NUM_NODES_SECOND_GROUP) {
          group = 1;
        }
        else {
          group = 2;
        }

        model.nodes.push({
          group: group
        });

        model.edges.push({
          from: Math.floor(Math.random() * NUM_NODES),
          to: Math.floor(Math.random() * (NUM_NODES-1))
        })
      }

      let graph = new ElGrapho({
        container: document.getElementById('container'),
        model: ElGrapho.layouts.Cluster(model),
        width: 500,
        height: 500,
        darkMode: true,
        debug: false
      });

    </script>
  </body>
</html>